<template>
    <div>
        <van-skeleton title :row="18" :loading="loading">
            <div style="padding: 15px;">
                <div v-if="img <= 0">
                    <img src="../../img/kzt.png" alt="">
                    <span style="margin-left: 42%;">暂无资质</span>
                </div>
                <div v-for="i in data">
                    <div style="padding: 10px; border: 1px solid #eee;">
                        <img style="width: 100%;" :src="i.url" alt="">
                        <van-button style="width: 100%;" size="mini" @click="del(i.id)" type="danger">删除资质</van-button>
                    </div>
                </div>
                <div style="margin-top: 25px;">
                    <van-button type="primary" @click="show = true" block>新增资质</van-button>
                    <van-popup v-model:show="show" position="bottom" :style="{ height: '60%' }">
                        <div style="padding: 10px;">
                            <div style="margin-top: 10px;">
                                <van-cell-group inset>
                                    <van-field v-model="value" label="资质名称" placeholder="请输入资质名称" />
                                </van-cell-group>
                            </div>
                            <div>
                                <div>
                                    <van-field name="uploader">
                                        <template #input>
                                            <van-uploader v-model="value3" multiple :max-count="1"
                                                :after-read="afterRead" preview-size="380px" class="uploader"
                                                ref="file" />
                                        </template>
                                    </van-field>
                                </div>
                            </div>
                            <div>
                                <van-button type="primary" @click="xinzeng()" block>新增</van-button>
                            </div>
                        </div>
                    </van-popup>
                </div>
            </div>
        </van-skeleton>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue';
import { getGoodsQualifications, deleteQualifications, addQualifications } from '../api/goods'
import { useRoute } from 'vue-router';
import { showNotify, showConfirmDialog } from 'vant';
import axios from 'axios'


export default {
    setup() {
        const date = reactive({
            img: 0,
            data: [],
            loading: true,
            show: false,
            value: ""
        })
        let value4 = ""
        const value3 = ref([
        ]);
        const del = (val) => {
            showConfirmDialog({
                title: '提示',
                message:
                    '确定要删除资质嘛？',
            }).then(() => {
                deleteQualifications({
                    id: val,
                }).then((res) => {
                    zizhi();
                    showNotify({ type: 'success', message: res.message });
                })
            })
                .catch(() => {
                    // on cancel
                });
        }
        const xinzeng = () => {
            if (date.value == "") {
                showNotify({ type: 'danger', message: "请输入资质" });
            }
            if (value3.value.length == 0) {
                showNotify({ type: 'danger', message: "请添加图片" });
            }
            console.log(value3._rawValue, 'value3');
            if (date.value != "" && value3.value.length != 0) {
                showConfirmDialog({
                    title: '提示',
                    message:
                        '确定要新增资质嘛？',
                }).then(() => {
                    addQualifications({
                        gid: route.query.id,
                        name: date.value,
                        url: value4
                    }).then((res) => {
                        zizhi();
                        showNotify({ type: 'success', message: res.message });
                    })
                })
                    .catch(() => {
                        // on cancel
                    });
            }
        }
        // route.query.id,
        const route = useRoute();
        const zizhi = () => {
            getGoodsQualifications({
                id: route.query.id,
            }).then((res) => {
                date.img = res.data.length;
                date.data = res.data
                date.loading = false
            })
        }
        zizhi()
        const events = {
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);

                //在这块创建FormData对象
                // FormData 对象的使用：
                // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
                // 2. 异步上传二进制文件。
                //上传图片需要转换二进制这里要用到FormData
                const forms = new FormData();
                //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
                forms.append("file", file.file); // 获取上传图片信息

                //向后端发送相应的请求
                //这块的url是具体的交互接口
                //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
                //token根据实际情况自行添加
                axios
                    .post("https://sapi.jiangdaye.cn/api/resource/uploadQualifications", forms, {
                        headers: {
                            "content-type": "multipart/form-data",
                            token: this.token,
                        },
                    })
                    .then((res) => {
                        //如果传入的响应状态码为200，则成功将文件发送给后台
                        if (res.data.status === 200) {
                            console.log(res);
                            //this.imageData = res.data.showapi_res_body;
                            //this.isShow = false;
                            //this.showList = true;
                            //Toast(res.data.showapi_res_body.remark);
                        } else {
                            //Toast(res.data.msg);
                            //this.isShow = false;
                            console.log(res.data)//这块是请求失败后台给返回的相应的数据
                            value4 = res.data
                        }
                    });
            },
        }
        return ({
            fileList: [],//默认是一个空数组
            imageData: {},
            isShow: false,
            showList: false,
            value3,
            xinzeng,
            del,
            ...toRefs(date),
            ...events
        })
    }
}
</script>

<style></style>